<template>
  <edit-dialog :centerDialogVisible="visible" :tilte="title" :default-button="false" @Cancel="handleCancel"
    :width="width">
    <template #content>
      <div  v-if="status == 1">
        <layout-card ref="layoutCardMatch" headline="以下为可能与遗失物品匹配的捡拾物品：">
          <div class="table-common">
            <div class="goods">
              <div :class="applyStoreSelected.indexOf(item.taskId) != -1 ? 'goods_content_select' : 'goods_content'"
                @click="handleClickGoods(item)" v-for="(item, index) in tableData" :key="index">
                <img :src="item['goodsFiles'] ? item['goodsFiles'][0]['resourceAddress'] : image.noImg" class="image" />
                <div class="message">
                  <div class="message_content">
                    <div class="type" :title="item.goodsName">{{ item['goodsName'] }}</div>
                    <div class="terminal">{{ item['depositTerminal'] }}</div>
                    <!-- <div class="terminal">{{ item['taskProcess'] }}</div> -->
                  </div>
                  <div class="message_content">
                    <div class="headline">物品类型：</div>
                    <div class="headline_content">{{ getGoodsTypeName(item['goodsType']) }}</div>
                  </div>
                  <div class="message_content">
                    <div class="headline">捡拾时间：</div>
                    <div class="headline_content">{{ dayjs(item['pickUpTime']).format('YYYY-MM-DD') }}</div>
                  </div>
                  <div class="message_content">
                    <div class="headline">捡拾地：</div>
                    <div class="headline_content">{{ item['pickUpPlace'] }}</div>
                  </div>
                  <div class="message_content">
                    <div class="headline">捡拾人姓名：</div>
                    <div class="headline_content">{{ item['pickUpName'] }}</div>
                  </div>
                </div>
                <!-- <div :class="applyStoreSelected.indexOf(item.taskId) != -1 ? 'gray_overdue_active' : 'gray_overdue'">
                  ✔
                </div> -->
                <div :class="item['expireCountDown'] === null ? 'hidden_overdue' : (item['expireCountDown'] === 0 ? 'red_overdue' : 'green_overdue')">
                  {{ item['expireCountDown'] != null ? (item['expireCountDown'] === 0 ? '1小时内过期' : formatSeconds(item['expireCountDown']) + '小时后过期') : '' }}
                </div>
              </div>
            </div>
          </div>
        </layout-card>
      </div>
      <div v-if="status == 2">
        <div class="detail_content" style="margin-bottom: 15px;">
          <!-- <img class="content_img" :src="goodsObject.goodsFiles ? goodsObject.goodsFiles[0]?.resourceAddress : image.noImg" /> -->
          <div class="image-box">
            <img v-if="!goodsObject.goodsFiles" class="content_img" :src="image.noImg" />
            <div class="image-box-top" v-else>
              <el-icon size="30px" class="image-box-top-icon" @click="changeImage('left')"
                :style="{ cursor: imageInfo.imageIndex === 0 ? 'not-allowed' : 'pointer' }" v-if="imageInfo.imgLen > 1">
                <ArrowLeftBold />
              </el-icon>
              <img :src="imageInfo.imgArr[imageInfo.imageIndex]" class="content_img"
                @click="handlePicPreview(imageInfo.imgArr[imageInfo.imageIndex])" />
              <el-icon size="30px" class="image-box-top-icon" @click="changeImage('right')"
                :style="{ cursor: imageInfo.imageIndex === imageInfo.imgLen - 1 ? 'not-allowed' : 'pointer' }"
                v-if="imageInfo.imgLen > 1">
                <ArrowRightBold />
              </el-icon>
            </div>
            <div class="image-box-bottm" v-if="imageInfo.imgLen > 1">
              <img v-for="(item, index) in imageInfo.imgArr" @click="imageInfo.imageIndex = index" :src="item" :key="item"
                :style="{ border: imageInfo.imageIndex === index ? '1px solid #555df8' : '1px solid transparent' }">
            </div>
          </div>
          <div class="detail_body">
            <div class="body_message">
              <div class="message_title">物品名称：</div>
              <div class="message_content" style="word-wrap: break-word;max-width: 300px;">{{ goodsObject.goodsName }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">物品编号：</div>
              <div class="message_content">{{ goodsObject.goodsCode }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">保质期：</div>
              <div class="message_content">{{ goodsObject.timeLimit }}{{ goodsObject.timeLimitUnit == 'Y' ? '年' : goodsObject.timeLimitUnit == 'H' ? '小时' : goodsObject.timeLimitUnit == 'D' ? '天' : '' }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">捡拾人姓名：</div>
              <div class="message_content">{{ goodsObject.pickUpName }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">航站楼[捡拾]：</div>
              <div class="message_content">{{ goodsObject.pickUpTerminal }}</div>
            </div>
            <div class="body_message">
              <div class="message_title deliver_label">是否已递送至失物招领柜台：</div>
              <div class="message_content">{{ goodsObject.taskProcess == '未接收' ? '否' : '是' }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">航站楼[存放]：</div>
              <div class="message_content">{{ goodsObject.depositTerminal }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">登记人：</div>
              <div class="message_content">{{ goodsObject.creator.name }}</div>
            </div>
          </div>
          <div class="detail_body">
            <div class="body_message">
              <div class="message_title">物品类型：</div>
              <div class="message_content">{{ getGoodsTypeName(goodsObject.goodsType) }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">捡拾日期：</div>
              <div class="message_content">{{ goodsObject.pickUpTime ? dayjs(goodsObject.pickUpTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">物品时效：</div>
              <div class="message_content">{{ goodsObject.goodsLimitTime ? dayjs(goodsObject.goodsLimitTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">捡拾人电话：</div>
              <div class="message_content">{{ goodsObject.pickUpPhone }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">捡拾地：</div>
              <div class="message_content">{{ goodsObject.pickUpPlace }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">状态：</div>
              <div class="message_content">{{ goodsObject.taskProcess }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">&nbsp;</div>
              <div class="message_content">&nbsp;</div>
            </div>
            <div class="body_message">
              <div class="message_title">存放地：</div>
              <div class="message_content">{{ getDepositPlaceName(goodsObject.depositPlace) }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">登记时间：</div>
              <div class="message_content">{{ goodsObject.createTime ? dayjs(goodsObject.createTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="status == 3">
        <el-form ref="receiveFormRef" :model="receiveForm" :rules="rules" label-position="right" label-width="100px">
          <el-form-item label="领取人姓名" prop="receiveName">
            <el-input v-model.trim="receiveForm.receiveName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="领取人证件号" prop="receiveNo">
            <el-input v-model.trim="receiveForm.receiveNo" autocomplete="off" />
          </el-form-item>
          <el-form-item label="领取人电话" prop="receivePhone">
            <el-input v-model.trim="receiveForm.receivePhone" autocomplete="off" />
          </el-form-item>
          <el-form-item label="领取时间" prop="receiveTime">
            <el-date-picker v-model="receiveForm.receiveTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"/>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input type="textarea" :rows="5" v-model.trim="receiveForm.remarks" />
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template #custom>
      <span class="dialog-footer" v-show="status == 1">
        <el-button class="buttonCancel" @click="handleBackEdit" v-if="state == 2">返回编辑</el-button>
        <el-button class="buttonCancel" @click="handleCancel">取消</el-button>
      </span>
      <span class="dialog-footer" v-show="status == 2">
        <el-button class="buttonCancel" @click="handleBack">返回</el-button>
        <el-button class="buttonCancel" @click="handleCancel">取消</el-button>
        <el-button class="buttonReceive" @click="handleOutbound()" v-if="goodsObject.taskProcess === '已入库' || goodsObject.taskProcess === '出库审批驳回'" :loading="loading">申请出库</el-button>
        <el-button class="buttonReceive" @click="handleReceive()" v-if="goodsObject.taskProcess === '未接收' || goodsObject.taskProcess === '已接收' || goodsObject.taskProcess === '入库审批' || goodsObject.taskProcess === '入库审批驳回' || goodsObject.taskProcess === '已出库' || goodsObject.taskProcess === '过期处置'" :loading="loading">领取</el-button>
      </span>
      <span class="dialog-footer" v-show="status == 3">
        <el-button class="buttonCancel" @click="handleBack">返回</el-button>
        <el-button class="buttonReceive" @click="handlerConfirmReceive(receiveFormRef)" :loading="loading">确认领取</el-button>
      </span>
    </template>
  </edit-dialog>
  <el-dialog v-model="dialogVisible" width="auto" align-center center>
    <img :src="dialogImageUrl"/>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, defineProps, computed, watch, reactive, toRefs } from 'vue'
import { useStore } from 'vuex'
import LayoutCard from '@/components/LayoutCard/index.vue'
import editDialog from '@/components/editDialog/index.vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { image } from '@/assets/index'
import dayjs from 'dayjs'
import { AcceptGoodsReq, ReceiveGoodsItem, getAllGoodsReg, pickUpGoodsDetail } from '@/api/lose/goodsReg'
import { getGoodsTypeName, getDepositPlaceName } from '@/utils/common'
import { appllyOutbound, receiveLostGoods } from '@/api/lose/goodsLost'
import { cloneDeep, merge } from 'lodash'
import { pa } from 'element-plus/es/locale'
const title = ref('遗失物品与捡拾物品匹配')
const width = ref('80%')
const loading = ref(false)
const taskProcess = ref('')
const lostId = ref(0)
const lastStatus = ref(1)
const status = ref(1) // 1、匹配、2、详情，3、领取
const regId = ref()
const taskId = ref()
const dialogImageUrl = ref('') // 图片地址
const dialogVisible = ref(false) // 图片预览弹窗
const imageInfo = reactive({
  imageIndex: 0,
  imgArr: [],
  imgLen: 0
})
interface FileDataType {
  enclosureContent: string,
  enclosureName: string,
  enclosureSuffix: string,
  resourceAddress: string,
  enclosureCode: string,
}
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  info: {
    type: Object
  },
  state: { // 1、列表入口进入，2、新增入回进入
    type: Number
  }
})
let { visible } = toRefs(props)
const applyStoreSelected = ref<Array<string>>([])
const emit = defineEmits(['cancel', 'submit', 'showMatch','showAdd'])
const tableData = ref([])
const store = useStore()
const userInfo = computed(() => store.state.user.userInfo)
const receiveFormRef = ref<FormInstance>()
const receiveForm = reactive<ReceiveGoodsItem>({
  regId: '',
  taskId: '',
  receiveName: '',
  receiveNo: '',
  receivePhone: '',
  receiveTime: '',
  remarks: '',
  creator: {
    id: '',
    name: '',
    organId: '',
    organName: ''
  },
  createTime: ''
})
const formatSeconds = (seconds: number) => {
  const hour = 60 * 60
  const hourStr = dayjs().hour(~~(seconds / hour)).format('H')
  return hourStr
}

interface GoodsDataFace {
  regId: string
  taskId: string
  goodsName: string
  goodsType: string
  goodsCode: number
  pickUpTime: string
  timeLimit: string
  timeLimitUnit: string
  goodsLimitTime: string
  pickUpName: string
  pickUpPhone: string
  pickUpTerminal: string
  pickUpPlace: string
  depositTerminal: string
  depositPlace: string
  goodsFiles?: Array<{
    enclosureContent: string
    enclosureName: string
    enclosureSuffix: string
    resourceAddress: string
    enclosureCode: string
  }>,
  creator: {
    id: string
    name: string
  }
  createTime?: string
  taskProcess: string
}

const initGoodsObject = {
  regId: '',
  taskId: '',
  goodsName: '',
  goodsType: '',
  goodsCode: 0,
  pickUpTime: '',
  timeLimit: '',
  timeLimitUnit: '',
  goodsLimitTime: '',
  pickUpName: '',
  pickUpPhone: '',
  pickUpTerminal: '',
  pickUpPlace: '',
  depositTerminal: '',
  depositPlace: '',
  goodsFiles: [],
  creator: {
    id: '',
    name: ''
  },
  createTime: '',
  taskProcess: ''
}

const goodsObject = reactive<GoodsDataFace>(cloneDeep(initGoodsObject))
const validatePhone = (rule: any, value: any, callback: any) => {
  if (!value) return callback(new Error('请输入手机号'))
  if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(value)) return callback(new Error('手机号格式错误'))
  callback()
}
const rules = reactive<FormRules>({
  receiveName: [{
    required: true, message: '请输入领取人姓名', trigger: 'blur'
  }],
  receivePhone: [
    { required: true, message: '请输入领取人电话', trigger: 'blur' },
    { required: true, validator: validatePhone, trigger: 'blur' }],
  receiveTime: [{
    required: true, message: '请选择领取时间', trigger: 'blur'
  }]
})
/**
* 切换显示图片
*/
const changeImage = (value: string) => {
  if ((value === 'left' && imageInfo.imageIndex === 0) || (value === 'right' && imageInfo.imageIndex === imageInfo.imgLen - 1)) {
    return
  }
  if (value === 'left') {
    imageInfo.imageIndex = imageInfo.imageIndex - 1
  } else {
    imageInfo.imageIndex = imageInfo.imageIndex + 1
  }
}

/**
* 预览图片
*/
const handlePicPreview = (url: string) => {
  dialogImageUrl.value = url
  dialogVisible.value = true
}
/**
 * 返回编辑
 */
const handleBackEdit = () => {
  emit('showAdd', lostId.value)
}

/**
 * 返回
 */
const handleBack = () => {
  status.value = lastStatus.value
  if (status.value === 1) {
    title.value = '遗失物品与捡拾物品匹配'
    width.value = '80%'
    Object.assign(goodsObject, cloneDeep(initGoodsObject))
    const files = []
    goodsObject.goodsFiles = files
  } else if (status.value === 2) {
    title.value = '查看与遗失物品匹配的【待领取】捡拾物品'
    width.value = '50%'
  }
  lastStatus.value = lastStatus.value - 1
}

/**
 * 取消
 */
const handleCancel = () => {
  status.value = lastStatus.value = 1
  title.value = '遗失物品与捡拾物品匹配'
  width.value = '80%'
  emit('cancel')
}

/**
 * 点击领取
 */
const handleReceive = () => {
  title.value = '领取捡拾物品'
  width.value = 'auto'
  lastStatus.value = status.value
  status.value = 3
}

/**
 * 确认领取
 */
const handlerConfirmReceive = async (formEl: FormInstance | undefined) => {
  loading.value = true
  if (!formEl) {
    loading.value = false
    return
  }
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      receiveForm.receiveTime = receiveForm.receiveTime ? dayjs(receiveForm.receiveTime).format('YYYY-MM-DD HH:mm:ss') : ''
      const payload: ReceiveGoodsItem = { ...receiveForm }
      payload.creator = {
        id: userInfo.value.userId,
        name: userInfo.value.name,
        organId: userInfo.value.organId,
        organName: userInfo.value.organName
      }
      payload.regId = regId.value
      payload.taskId = taskId.value
      payload.lostId = lostId.value
      receiveLostGoods(payload).then(res => {
        if (res?.code === '1') {
          emit('submit')
          ElMessage.success('领取成功！')
        } else {
          ElMessage.error(res?.message || '领取失败，请重试！')
        }
        console.log('Submit!')
        loading.value = false
      }).catch(err => {
        loading.value = false
        ElMessage.error(err?.message || '领取失败，请重试！')
      })
    } else {
      console.log('error submit!', fields)
    }
    loading.value = false
  })
}

// 申请出库
const handleOutbound = () => {
  loading.value = true
  const params = {
    regId: regId.value,
    taskId: taskId.value,
    taskProcess: '出库审批',
    creator: {
      id: userInfo.value.userId,
      name: userInfo.value.name,
      organId: userInfo.value.organId,
      organName: userInfo.value.organName
    }
  }
  appllyOutbound(params).then((res: any) => {
    if (res?.code === '1') {
      ElMessage.success('申请出库成功！')
    } else {
      ElMessage.error(res?.message || '出库失败，请重试！')
    }
    emit('submit')
    loading.value = false
  }).catch(err => {
    loading.value = false
    ElMessage.error(err.message || '出库失败，请重试！')
  })
}

/**
 * 物品点击显示详情
 */
const handleClickGoods = (item: any) => {
  lastStatus.value = status.value
  status.value = 2
  Object.assign(goodsObject, initGoodsObject)
  const files = []
  goodsObject.goodsFiles = files
  regId.value = item.regId
  taskId.value = item.taskId
  taskProcess.value = item.taskProcess
  pickUpGoodsDetail({ regId: item.regId, taskId: item.taskId }).then(res => {
    merge(goodsObject, res.data.goodsData)
    const newImgArr: Array<string> = []
    if (goodsObject.goodsFiles?.length) {
      goodsObject.goodsFiles.forEach((ele: FileDataType) => {
        ele.resourceAddress && (newImgArr.push(ele.resourceAddress))
      })
    }
    imageInfo.imgArr = newImgArr
    imageInfo.imageIndex = 0
    imageInfo.imgLen = newImgArr.length
  }).catch(err => {
    ElMessage.error(err.message || '获取物品详情失败')
  })
  title.value = '查看与遗失物品匹配的【待领取】捡拾物品'
  width.value = 'auto'
}

const getData = () => {
  const params = {
    keyWord: props.info.goodsName,
    goodsType: props.info.goodsType,
    startTime: props.info.lostTimeStart,
    endTime: props.info.lostTimeEnd,
    taskProcess: '未接收,已接收,入库审批,入库审批驳回,已出库,已入库,出库审批,出库审批驳回,过期处置'
  }
  if (params.startTime === params.endTime) {
    params.startTime = dayjs(params.startTime).subtract(3, 'd').format('YYYY-MM-DD HH:mm:ss')
    params.endTime = dayjs(params.endTime).add(3, 'd').format('YYYY-MM-DD HH:mm:ss')
  } else {
    params.startTime = dayjs(params.startTime).format('YYYY-MM-DD HH:mm:ss')
    params.endTime = dayjs(params.endTime).format('YYYY-MM-DD HH:mm:ss')
  }
  getAllGoodsReg(params).then(res => {
    if (res.data) {
      // @ts-ignore
      tableData.value = res.data
    }
  })
}
watch(() => props.visible, (newVal) => {
  if (newVal) {
    lostId.value = props.info.lostId
    tableData.value = []
    loading.value = false
    status.value = lastStatus.value = 1
    title.value = '遗失物品与捡拾物品匹配'
    width.value = '80%'
    getData()
  }
})
</script>
<style lang="less" scoped>
:deep(.el-dialog) {
  height: auto;
}
.detail_content {
  display: flex;
  justify-items: center;
  align-items: center;
  padding: 24px;
  padding-bottom: 0;
  .image-box {
    user-select: none;
    .content_img {
      width: 240px;
      height: 180px;
      cursor: pointer;
    }
    .image-box-top {
      display: flex;
      align-items: center;

    }
    .image-box-bottm {
      width: 300px;
      align-items: center;
      margin-top: 10px;
      text-align: center;
      >img {
        width: 50px;
        height: 30px;
        cursor: pointer;
        margin: 0 5px;
        padding: 3px;
      }
    }
  }
  // .content_img {
  //   width: 240px;
  //   height: 240px;
  //   border-radius: 15px;
  // }
  .detail_body {
    width: auto;
    height: 240px;
    // background: rgba(238,243,255,0.56);
    border-radius: 8px;
    margin-left: 24px;
    padding-left: 24px;
    // padding-top: 16px;
    padding-bottom: 16px;
    box-sizing: border-box;
    .body_message {
      display: flex;
      line-height: 25px;
      .message_title {
        width: 100px;
        text-align: right;
        margin-bottom: 8px;
        font-size: 14px;
        font-family: "HarmonyOS_Sans_SC",sans-serif;
        color: #989DAA;
      }
      .deliver_label {
        width: 185px;
      }
      .message_content {
        font-size: 14px;
        font-family: "HarmonyOS_Sans_SC",sans-serif;
        color: #535862;
        margin-left: 10px;
      }
    }
  }
}
.table-common {
  width: 100%;
  background-color: #fff;
  .goods {
    max-height: 450px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    .goods_content,
    .goods_content_select {
      // width: calc((1920px - 650px) / 3);
      width: calc(100% / 3 - 24px);
      height: 180px;
      background: #F3F4F7;
      border-radius: 8px;
      margin-top: 24px;
      margin-right: 24px;
      display: flex;
      align-items: center;
      position: relative;
      .image {
        width: 132px;
        height: 132px;
        border-radius: 10px;
        margin-left: 15px;
      }
      .message {
        margin-left: 24px;
        margin-top: 5px;
        width: 100%;
        .message_content {
          display: flex;
          margin-top: 4px;
          .type {
            font-size: 16px;
            font-family: "HarmonyOS_Sans_SC_Bold",sans-serif;
            color: #535862;
            font-weight: bolder;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 40%;
          }
          .terminal {
            margin-left: 10px;
            padding: 0 5px;
            display: inline-block;
            text-align: center;
            // width: 50px;
            width: auto;
            height: 22px;
            line-height: 22px;
            background: rgb(0 148 255 / 12%);
            border-radius: 6px;
            border: 1px solid rgb(47 143 241 / 40%);
            font-size: 14px;
            color: #2F7DF1;
            ;
          }
          .headline {
            // width: 70px;
            height: 22px;
            font-size: 14px;
            font-family: "HarmonyOS_Sans_SC",sans-serif;
            color: #989DAA;
            line-height: 22px;
          }
          .headline_content {
            height: 22px;
            font-size: 14px;
            font-family: "HarmonyOS_Sans_SC",sans-serif;
            color: #535862;
            line-height: 22px;
          }
        }
      }
    }
    .goods_content_select {
      background: #EBF2FA;
      border: 1px solid #327ECB;
    }
    .goods_content:hover,
    .goods_content_select:hover {
      cursor: pointer;
    }
    .hidden_overdue {
      display: none;
    }
    .red_overdue {
      height: 22px;
      background: rgb(255 71 36 / 12%);
      border-radius: 6px;
      border: 1px solid rgb(255 76 45 / 40%);
      font-size: 14px;
      font-family: "HarmonyOS_Sans_SC",sans-serif;
      color: #F24A45;
      line-height: 22px;
      padding-left: 8px;
      padding-right: 8px;
      position: absolute;
      top: 5px;
      right: 8px;
    }
    .green_overdue {
      height: 22px;
      background: rgb(255 179 31 / 12%);
      border-radius: 6px;
      border: 1px solid rgb(255 159 58 / 40%);
      font-size: 14px;
      font-family: "HarmonyOS_Sans_SC",sans-serif;
      color: #FF8F3A;
      line-height: 22px;
      padding-left: 8px;
      padding-right: 8px;
      position: absolute;
      top: 5px;
      right: 8px;
    }
    .gray_overdue,
    .gray_overdue_active {
      height: 22px;
      width: 24px;
      background: rgb(215 215 215);
      border-radius: 24px;
      text-align: center;
      border: 1px solid rgb(215 215 215 / 40%);
      font-size: 14px;
      font-family: "HarmonyOS_Sans_SC",sans-serif;
      color: #FFF;
      position: absolute;
      top: 5px;
      right: 8px;
    }
    .gray_overdue_active {
      background: rgb(51 126 202);
      border: 1px solid rgb(51 126 202 / 40%);
    }

  }
}


// .buttonCancel {
//   width: 88px;
// }

// .buttonReceive {
//   width: 88px;
//   color: #FFFFFF;
//   background: #337FCC;
//   border-radius: 6px;
//   border: 1px solid #337FCC;
// }
.buttonCancel {
  width: 88px;
}
.buttonReceive {
  width: 88px;
  color: #FFF;
  background: #337FCC;
  border-radius: 6px;
  border: 1px solid #337FCC;
}
</style>
